<template>
  <zzm-message title="标题内容" style="color: red">
    <!-- <template #title>1234567</template> -->
    <template #content>
      <div ref="main" style="width: 95%; height: 300px"></div>
    </template>
  </zzm-message>
</template>
<script lang="ts" setup>
let messageTitle = "这是一个标题";

import * as echarts from "echarts";

var main = ref();
var option = null;
try {
  await Promise.reject();
} catch (error) { }

// console.log(123)
option = {
  // title: {
  //   text: "数据统计",
  // },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["运动区", "宿舍区", "教学区", "吸烟区", "干饭区"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["运动区", "宿舍区", "教学区", "吸烟区", "干饭区"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "Email",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "Union Ads",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: "Video Ads",
      type: "line",
      stack: "Total",
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: "Direct",
      type: "line",
      stack: "Total",
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: "Search Engine",
      type: "line",
      stack: "Total",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
};

var myChart = null;

onMounted(() => {
  myChart = echarts.init(main.value);
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
});
var index = useStore.index();
watch(
  index,
  (state) => {
    // console.log(state.indexLeftBottom);
    option.xAxis.data = state.indexLeftBottom.legendData;
    // option.series = state.indexLeftBottom.seriesData;
    option.legend.data = state.indexLeftBottom.legendData;
    var legendData = [];
    for (var i = 0; i < state.indexLeftBottom.seriesData.length; i++) {
      legendData.push({
        name: state.indexLeftBottom.legendData[i],
        type: "line",
        stack: "Total",
        data: [...state.indexLeftBottom.seriesData[i]],
      });
    }
    option.series = legendData;
    myChart.hideLoading();
    myChart.setOption(option);
  },
  { deep: true }
);


</script>

<style scoped></style>
